iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
1

在Typescript 世界裡也跟Javascript 一樣沒有支援多載, 但是有一點比較強的地方就是

我們可以先宣告兩個沒有內容的方法宣告

function test(name: string): void;
function test(name: string, mount: number): void;

function show(name?: string, amount?: number): void {
   if( amount == undefined ) {
      console.log("Hello " + name);
      return; 
   }
   console.log("Hello " + name + " money=" + amount);
}

你可以注意到上面 show() 方法的輸入參數宣告為

name?: string, amount?: number

參數名稱後面加上 "?" 符號, 這表示這是個可選參數

最起碼在VSCode 編輯使用Typescript 這多載功能的時候可以發揮 強型別 的威力. 而且VSCode IntelliSense 能夠讓你在輸入Typescript 程式碼時看到變數的屬性及其他成員.

強型別(Strong Type) 是指明確表達變數的型別宣告, 這樣的開發方式可以讓開發人員在編譯時期(Compile-Time) 就能夠發現錯誤, 減少執行時期(Runtime)發生錯誤的機會, 因為編譯時期的錯誤可以透過編譯器(Compiler)在編譯的時候就幫你發現問題.

屬性(Property)

Javascript 世界裡沒有分Property 和Field 區別, 對Javascript 來說都一樣這樣寫

function Person {
   this.name = "flash";
}

而Typescript 更強, 有getter 和setter , 就像C# 的Property 一樣優雅.
可以像C# 屬性一樣可以在設定或擷取屬性前, 執行一些邏輯.

class Person {
   private _count: number = 0;
   get count(): number {
      return this._count;
   }
   set count(val: number): void{
      this._count = val;
   }
}

當然Typescript 也支援單一的getter 或是setter, 如下表示count 屬性只能唯讀

class Person {
   private _count: number = 0;
   get count(): number {
      return this._count;
   }
}

靜態屬性/靜態方法

在Javascript 世界裡也沒這 "靜態" 概念

function Person() {
}

Person.prototype.count = 0;

var p = new Person();
Person.prototype.count++;
console.log(e.count);

同樣地Javascript 再一次利用prototype 來模擬靜態屬性.

而在Typescript 世界裡再一次維持高效表現, 輕鬆簡單達標

class Person {
   public static count: number = 0;
}

Person.count++;
console.log(Person.count);

Typescript 的靜態方法的實現也很容易, 加上 static 就搞定了

class Person {
   public static sayHello(): void {
      console.log("Hi, Typescript static World");
   }
}

Person.sayHello();

Typescript 的物件(Class) 宣告

上面幾個例子說明了Javascript 對物件(Class) 宣告以及語義的薄弱. 現在我完整的介紹Typescript Class 宣告的用法有哪些.

使用Typescript class 定義的時候, 使用 constructor 定義建構函數

class Person {
   private _name: string = "";

   constructor(name: string) {
      this._name = name;
   }
}

Typescript Class 可以使用三種存取public, protected, private

  • public 是公開的, 允許外面存取, 假如不寫public , 預設就是public
  • protected 是受保護的, 只允許本身內部和子物件存取
  • private 是私有的, 只允許本身內部存取

下面舉一些 public, protected, private 例子

class Person {
   public name:string = "flash";
   private _count: number = 0;
   protected _birth: date;
   public sayHello():void {
      ...
   }  
}

Typescript 也有提供抽象(abstract) , 就跟一般的物件導向語言一樣, 可以像下面這樣寫

class abstract AnimalBase {
   public abstruct quack(): void;
}

class Duck extends AnimalBase {
   public quack(): void {
      ...
   }
}

注意的地方是Typescript 沒有 override 這個關鍵字, 在需要 override 方法的地方不需要特別標示 override, Typescript 自動會推斷 override 這個方法


上一篇
物件導向的封裝繼承 - 05
下一篇
泛型 - 07
系列文
為什麼世界需要Typescript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言